<template>
    <div>
        <template  v-for="(item,index) in fen">
            <ul class="Slike" :key="index" v-if="index==0">
                <li class="Sliketop">
                    <i class="Sliketopline"></i>
                    <span class="Slikew">{{fen[index]}}</span>
                    <i class="Sliketopline"></i>
                </li>
            <li>
                <!-- 二维数组 -->
                <ul class="Slikemain" v-for="(item,index) in like" :key="index">
                    <li class="Smw" v-for="(it,i) in item" :key="i">
                        <img class="hot" :src="src" alt="">
                        <p class="hotzi">热品</p>
                        <div >
                            <img class="Smi" :src="it.src" alt="">
                        </div>
                        <div class="Smizi">
                            {{it.zi}}
                        </div>
                        <p class="start">即将开始</p>
                        <p class="time">
                            倒计时：
                            <span>{{it.time1}}</span>时
                            <span>{{it.time2}}</span>分
                            <span>{{it.time3}}</span>秒
                        </p>
                    </li>
                </ul> 
            </li> 
        </ul>
        <template v-if="jia">
            <ul class="Slikes" :key="index" v-if="index>0">
                <li class="Sliketop">
                    <i class="Sliketopline"></i>
                    <span class="Slikew">{{fen[index]}}</span>
                    <i class="Sliketopline"></i>
                </li>
                <li>
                    <!-- 二维数组 -->
                    <ul class="Slikemain" v-for="(item,index) in like" :key="index">
                        <li class="Smw" v-for="(it,i) in item" :key="i">
                            <img class="hot" :src="src" alt="">
                            <p class="hotzi">热品</p>
                            <div >
                                <img class="Smi" :src="it.src" alt="">
                            </div>
                            <div class="Smizi">
                                {{it.zi}}
                            </div>
                            <p class="start">即将开始</p>
                            <p class="time">
                                倒计时：
                                <span>{{it.time1}}</span>时
                                <span>{{it.time2}}</span>分
                                <span>{{it.time3}}</span>秒
                            </p>
                        </li>
                    </ul> 
                </li> 
            </ul>
        </template>
    </template>
    <li class="Str">
        <a class="Sjiazai" v-if="!jia" href="###" @click="change1()">加载更多</a>
        <a class="Sjiazai" v-if="jia" href="###" @click="change1()">亲，已经到底了哦</a>
    </li>
</div>
</template>

<script>
export default {
    name:'Meizhuang',
    data(){
        return{
            // 猜你喜欢
        like:this.$store.state.mei,
        fen:this.$store.state.fenlei,
        src:require('../../assets/user/hot.png'),
        jia:false,
        }
    },
    methods:{
        change1(){
        this.jia = !this.jia;
      }, 
    }
}
</script>

<style  scoped>
.Slike {
  background: #fff;
  font-size: 2.4rem;
  margin-top: 2rem;
  /* border: 1px solid #cccccc; */
  color: #4d4d4d;
}
.Slikes {
    background: #fff;
  font-size: 2.4rem;
  color: #4d4d4d;
}
.Str {
    background: #fff;
    height: 20rem;
}
.Sliketop {
  font-size: 3rem;
  padding: 1.2rem 0 2.5rem 0;
}
.Sliketopline {
  display: inline-block;
  width: 6rem;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
.Slikew {
  display: inline-block;
  margin: 0 1.5rem;
}
.Slikemain {
  display: flex;
  justify-content: space-evenly;
  padding: 2.5rem 0;
  flex-wrap: wrap;
}
.Sjiazai {
  color: #808080;
}
.Smw {
    width: 20rem;
    height: 23.8rem;
    border: 0.1rem solid #ccc;
    position: relative;
    margin-bottom: 6rem;
}
.Smi {
    height: 10.5rem;
    margin: 6.5rem 0 2.2rem 2rem;
}
.hot {
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 7.6rem;
}
.hotzi {
    writing-mode: vertical-rl;
    position: absolute;
    top: 0.4rem;
    left: 0.3rem;
    color: #fff;
}
.start {
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
}
.time {
    text-align: left;
    font-size: 1.8rem;
}
.time span {
    color: #e96466;
}
.Sjiazai {
  color: #808080;
}
.Str {
    font-size: 2.4rem;
}
</style>